<template>
    <div class="settings" :style="styles">
       <v-header title="设置"></v-header>
       <scroller :bounce="false">
            <div class="backgroungsetting xSwitchWrappper">
                <x-switch title="开启VR" :value-map="[false, true]" v-model="VRStatus" @on-change="handleSetVr"></x-switch>
            </div>
            <cell title="修改个人信息" is-link @click.native="handlemessage" class="editMessage"></cell>
            <cell title="我的收获地址" is-link @click.native="handleGoAddress" class="editMessage"></cell>
            <div class="groupOne">
              <cell title="隐私政策" value='阅读' @click.native="handlePrivacy"></cell>
              <cell title="服务条款" value='阅读' @click.native="handleServerCase"></cell>
            </div>

            <div class="groupTwo">
              <cell title="当前版本" class="nowPublish">
                  <span>{{version}}</span>
              </cell>
              <cell title="检查更新" is-link @click.native="updateVersion" v-show="!ifIsIos"></cell>
            </div>
            <div class="logout">
              <x-button plain type="primary" class="submitButton" @click.native="handleAlert">{{$t('btn.logout')}}</x-button>
            </div>
        </scroller>

        <div class="alertSetWrapper">
          <div>
            <confirm v-model="show"
            title="温馨提示"
            @on-cancel="onCancel"
            @on-confirm="onConfirm">
                <p style="text-align:center;">您确定退出嗨黔东南吗</p>
            </confirm>
          </div>
        </div>
    </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import { Scroller, XSwitch, XButton, Cell, Confirm, Group } from 'vux'
import { localUser } from '@/assets/js/local'
import nativeBridge from '@/assets/js/nativeBridge'
import { isIOS } from '@/assets/js/brower'

export default {
  data () {
    return {
      VRStatus: true,
      styles: {
        heght: '0px'
      },
      user: {},
      show: false,
      version: '',
      ifIsIos: isIOS()
    }
  },
  mounted () {
    /* eslint-disable */
    // this.VRStatus = window.control.switchOpen()
    /* eslint-disable */
  },
  created () {
    this.user = localUser.get()
    this.styles.heght = window.innerHeight - 64 + 'px'
    // 获取VR开关状态
    nativeBridge.getVRStatus((arg) => {
      this.VRStatus = arg
    })
    nativeBridge.appVersion(code => {
      this.version = code
    })
  },
  methods: {
    handlePrivacy () {
      this.$router.push('/privacy')
    },
    handleServerCase () {
      this.$router.push('/servercase')
    },
    handleAlert () {
      this.show = true
    },
    hangdleClickLogout () {
      const JIM = this.$store.getters.JIM
      if (JIM) {
        JIM.loginOut()
      }
      this.$store.commit('SET_LOGIN_ANMATION', 'myRorate')
      localUser.remove(this.user)
      nativeBridge.setJPushAlias('')
      this.$router.replace('/home')
    },
    handleSetVr (value) {
      nativeBridge.toggleVR(this, value)
    },

    // 确认弹框友好提示
    onCancel () {
    },
    onConfirm () {
      this.hangdleClickLogout()
    },
    updateVersion () {
      window.android.updateVersion()
    },
    handlemessage () {
      this.$router.push('/user/personmessage')
    },
    handleGoAddress () {
      this.$router.push('/user/harvestaddress')
    }
  },
  components: {
    VHeader,
    Scroller,
    XSwitch,
    XButton,
    Cell,
    Confirm,
    Group,
    isIOS
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
.settings {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $color-background;
  z-index: 101;
  height:100%;
}

.logout {
  margin-top: 35%;
  margin-left: 10%;
  margin-right: 10%;
}

.backgroungsetting {
    background-color:white;
}

.submitButton {
  border-radius:99px;
  border-color: $color-theme;
  color: $color-theme;
  background-color white
}

.backgroungsetting span {
  color: $color-theme;
}

.weui-dialog__btn_primary {
  color: red
}

.editMessage {
  background-color white
}

.groupOne {
  background-color white
  margin-top 10px
}

.groupTwo {
  background-color white
  margin-top 10px
}
</style>
